<template>
	<view class="mini_program_container">
		<view class="mini_program_box">
			<view class="mini_program_top_box">
				<view class="mini_program_top_all">
					<view class="record_img_box">
						<image :src="recordImg" mode="" class="record_img" @click="handleCheckRecord"></image>
					</view>
					<view class="top_title">
						星图ID
					</view>
					<view class="top_input_box">
						<u-input v-model="miniProgramObj.douyinCode" :clearable="false" :border="false"
							placeholder-style="font-family: all-font;" />
					</view>
				</view>

				<view class="mini_program_top_all">
					<view class="top_title">
						姓名
					</view>
					<view class="top_input_box">
						<u-input v-model="miniProgramObj.douyinName" :clearable="false" :border="false"
							placeholder-style="font-family: all-font;" />
					</view>
				</view>

			<!-- 	<view class="mini_program_top_all">
					<view class="top_title">
						身份证号
					</view>
					<view class="top_input_box">
						<u-input v-model="miniProgramObj.douyinIdcard" maxlength="18" :clearable="false" :border="false"
							placeholder-style="font-family: all-font;" />
					</view>
				</view> -->

				<view class="mini_program_top_all">
					<view class="top_title">
						支付宝手机号
					</view>
					<view class="top_input_box">
						<u-input v-model="miniProgramObj.zfbPhone" maxlength="18" :clearable="false" :border="false"
							placeholder-style="font-family: all-font;" />
					</view>
				</view>

				<!-- <view class="mini_program_top_all">
					<view class="top_title">
						预约类型
					</view>
					<view class="">
						<u-radio-group v-model="miniProgramObj.type" @change="radioGroupChange">
							<u-radio v-for="(item, index) in typeList" :key="item.id" :name="item.id">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>

				<view class="mini_program_top_all">
					<view class="top_title">
						预约开始时间
					</view>
					<view class="top_input_box">
						<u-input v-model="miniProgramObj.reservationDate" :clearable="false" :border="false"
							type="select" @click="handleSelectDate" />
						<u-picker v-model="isShowReservation" mode="time" :params="reservationParams"
							@confirm="onConfirmDate"></u-picker>
					</view>
				</view>

				<view class="mini_program_top_all" v-if="miniProgramObj.type == 1">
					<view class="top_title">
						预约时长 (天)
					</view>
					<view class="top_input_box">
						<u-input v-model="miniProgramObj.dayNumber" :clearable="false" :border="false" type="select"
							placeholder="" @click="handleSelectDayNum" />
						<u-select v-model="isShowDayNumber" :list="dayNumberList" @confirm="onConfirmDay"></u-select>
					</view>
				</view>

				<view class="mini_program_top_all" v-else-if="miniProgramObj.type == 2">
					<view class="top_title">
						预约时长 (小时)
					</view>
					<view class="top_input_box">
						<u-input v-model="miniProgramObj.hourNumber" :clearable="false" :border="false" type="select"
							placeholder="" @click="handleSelectHourNum" />
						<u-select v-model="isShowHourNumber" :list="hourNumberList" @confirm="onConfirmHour"></u-select>
					</view>
				</view> -->

				<view class="mini_program_btn_box">
					<view class="submit_btn" @click="handleSubmit">
						提 交
					</view>
					<view class="tutorial_btn" @click="handleCheckTutorial">
						点我看教程
					</view>
				</view>
			</view>

			<view class="mini_program_bottom_box">
				<view class="title_box">
					<view class="title_img_box">
						<image :src="commodityIcon" mode="" class="title_img"></image>
					</view>
					<view class="title_text">
						选购商品
					</view>
				</view>

				<view class="choose_btn" @click="handleChooseCommodity">
					选 购 商 品
				</view>
			</view>

			<!-- 教程弹窗 -->
			<live-tutorial ref="refLiveTutorial" />
		</view>
	</view>
</template>

<script>
	// import VConsole from 'vconsole';
	import LiveTutorial from './components/liveTutorial.vue'
	export default {
		components: {
			LiveTutorial
		},
		data() {
			return {
				recordImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/6683718b61998_1719890315.png',
				commodityIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668367baddbe7_1719887802.png',
				miniProgramObj: {
					douyinCode: '',
					douyinName: '',
					douyinIdcard: '',
					type: 1,
					reservationDate: '',
					zfbPhone: '',
					hourNumber: 1,
					dayNumber: 1
				},
				typeList: [{
					id: 1,
					name: '天数'
				}, {
					id: 2,
					name: '小时数'
				}],
				reservationParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				isShowReservation: false,
				isShowDayNumber: false,
				dayNumberList: [{
					value: '1',
					label: '1'
				}, {
					value: '2',
					label: '2'
				}, {
					value: '3',
					label: '3'
				}, {
					value: '4',
					label: '4'
				}, {
					value: '5',
					label: '5'
				}, {
					value: '6',
					label: '6'
				}, {
					value: '7',
					label: '7'
				}, {
					value: '8',
					label: '8'
				}, {
					value: '9',
					label: '9'
				}, {
					value: '10',
					label: '10'
				}],
				isShowHourNumber: false,
				hourNumberList: [{
					value: '1',
					label: '1'
				}, {
					value: '2',
					label: '2'
				}, {
					value: '3',
					label: '3'
				}, {
					value: '4',
					label: '4'
				}, {
					value: '5',
					label: '5'
				}, {
					value: '6',
					label: '6'
				}, {
					value: '7',
					label: '7'
				}, {
					value: '8',
					label: '8'
				}, {
					value: '9',
					label: '9'
				}, {
					value: '10',
					label: '10'
				}],
			}
		},
		onShow() {
			// const vConsole = new VConsole();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const that = this
				this.$request('/api/getAgentLoginInfo', {
					id: uni.getStorageSync('userInfo').id
				}, 'GET').then(res => {
					if (res.code == 1) {
						let userInfo = uni.getStorageSync('userInfo')
						this.personMsgObj = res.data
						userInfo = res.data
						uni.setStorageSync('userInfo', userInfo)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 直播提交申请
			subProgramLiveApply() {
				const that = this
				let isAgent = uni.getStorageSync('h5-isAgent')
				this.$request('/api/subProgramLiveApply', {
					user_id: uni.getStorageSync('userInfo').id,
					is_agent: isAgent,
					id_name: this.miniProgramObj.douyinName,
					// id_card: this.miniProgramObj.douyinIdcard,
					zfb_phone: this.miniProgramObj.zfbPhone,
					dy_code: this.miniProgramObj.douyinCode,
					// type: this.miniProgramObj.type,
					// day: this.miniProgramObj.dayNumber,
					// hour: this.miniProgramObj.hourNumber,
					// start_time: this.miniProgramObj.reservationDate,
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.redirectTo({
							url: '/pages/agentPortion/paymentSuccess/paymentSuccess'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 选择开始日期
			handleSelectDate() {
				this.isShowReservation = true
			},

			// 日期确定
			onConfirmDate(e) {
				this.miniProgramObj.reservationDate = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e
					.minute + ':' + '00'
			},

			// 选择预约天数
			handleSelectDayNum() {
				this.isShowDayNumber = true
			},

			// 天数确定
			onConfirmDay(e) {
				this.miniProgramObj.dayNumber = e[0].value
			},

			// 选择预约小时数
			handleSelectHourNum() {
				this.isShowHourNumber = true
			},

			// 小时数确定
			onConfirmHour(e) {
				this.miniProgramObj.hourNumber = e[0].value
			},

			// 切换预约类型
			radioGroupChange(e) {

			},

			// 查看支付记录
			handleCheckRecord() {
				uni.navigateTo({
					url: '/pages/agentPortion/my/paymentRecord/paymentRecord'
				})
			},

			// 提交
			handleSubmit() {
				if (this.miniProgramObj.douyinCode == '') {
					uni.showToast({
						title: '请输入星图ID',
						icon: 'none'
					})
					return
				} else if (this.miniProgramObj.douyinName == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				} 
				// else if (this.miniProgramObj.douyinIdcard == '') {
				// 	uni.showToast({
				// 		title: '请输入身份证号',
				// 		icon: 'none'
				// 	})
				// 	return
				// } 
				else if (this.miniProgramObj.zfbPhone == '') {
					uni.showToast({
						title: '请输入支付宝手机号',
						icon: 'none'
					})
					return
				} else {
					this.subProgramLiveApply()
				}
				//  else if (this.miniProgramObj.reservationDate == '') {
				// 	uni.showToast({
				// 		title: '请选择预约开始时间',
				// 		icon: 'none'
				// 	})
				// 	return
				// } else if (this.miniProgramObj.hourNumber == '') {
				// 	uni.showToast({
				// 		title: '请选择预约小时数',
				// 		icon: 'none'
				// 	})
				// 	return
				// } else if (this.miniProgramObj.dayNumber == '') {
				// 	uni.showToast({
				// 		title: '请选择预约天数',
				// 		icon: 'none'
				// 	})
				// 	return
				// } 

			},

			// 点我看教程
			handleCheckTutorial() {
				this.$refs.refLiveTutorial.showLiveTutorial = true
			},

			// 选购商品
			handleChooseCommodity() {
				uni.navigateTo({
					url: '/pages/agentPortion/my/shoppingCart/shoppingCart'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mini_program_container {
		padding: 27rpx 22rpx 0;

		.mini_program_box {

			.mini_program_top_box {
				background: #FFFFFF;
				box-shadow: 0px 8rpx 10rpx 1px rgba(213, 213, 213, 0.14);
				border-radius: 20rpx;
				border: 2rpx solid #FFFFFF;
				padding: 8rpx 34rpx 48rpx;

				.mini_program_top_all {
					padding-bottom: 43rpx;

					.record_img_box {
						display: flex;
						justify-content: flex-end;

						.record_img {
							width: 180rpx;
							height: 84rpx;
						}
					}

					.top_title {
						font-family: all-font;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						padding-bottom: 25rpx;
					}

					.top_input_box {
						background: #F7F9FD;
						border-radius: 16rpx;
						border: 1px solid #EBEBEB;
						padding: 0 25rpx 0 20rpx;
					}
				}

				.mini_program_btn_box {
					font-family: all-font;

					.submit_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 76rpx;
						background: #F7F7F7;
						border-radius: 38rpx;
						border: 1px solid #599DFF;
						font-weight: 500;
						font-size: 34rpx;
						color: #5790FF;
						margin-bottom: 35rpx;
					}

					.tutorial_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 76rpx;
						background: linear-gradient(0deg, #578EFF, #62EEFF);
						box-shadow: 0px 6rpx 5rpx 0px rgba(67, 152, 255, 0.39);
						border-radius: 38rpx;
						font-weight: 500;
						font-size: 34rpx;
						color: #FFFFFF;
					}
				}
			}

			.mini_program_bottom_box {
				background: #FFFFFF;
				box-shadow: 0px 8rpx 10rpx 1px rgba(213, 213, 213, 0.39);
				border-radius: 20rpx;
				border: 2rpx solid #FFFFFF;
				padding: 24rpx 34rpx 44rpx;
				margin-top: 24rpx;

				.title_box {
					display: flex;
					align-items: center;

					.title_img_box {
						width: 42rpx;
						height: 46rpx;

						.title_img {
							width: 100%;
							height: 100%;
						}
					}

					.title_text {
						font-family: all-font;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						padding-left: 26rpx;
					}
				}

				.choose_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 88rpx;
					background: #F7F7F7;
					border-radius: 22rpx;
					border: 1px solid #599DFF;
					font-family: all-font;
					font-weight: 500;
					font-size: 34rpx;
					color: #5790FF;
					margin-top: 40rpx;
				}
			}
		}
	}
</style>